﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<style type="text/css">
body,ul,li{margin:0px;padding:0px}  ul,li{list-style:none}
.nav{width:960px;height:40px;text-align:center;background:#C90;margin:0px auto}
.nav ul{width:960px;height:40px;line-height:40px;}
.nav ul li{width:180px;height:40px;float:left;background:#666;margin-right:10px;cursor:pointer;border-left:1px solid #666;border-right:1px solid #666}
.nav ul li.on{background:#300}
.nav ul.bd{width:190px;height:120px;float:none;display:none;margin-left:-1px}
.nav ul.bd li{width:180px;height:40px;text-align:left;padding-left:10px;}
.nav li.hd:hover{border-left:1px solid #0F0;border-right:1px solid #0F0;}
.nav li.hd:hover .bd{border:1px solid #0F0;border-top:none;width:192px;}
</style>
</body>
<div class="nav">
<ul>
<li class="hd">
首页
</li>
<li class="hd">
导航二
<ul class="bd">
<li>导航二1</li>
<li>导航二2</li>
<li>导航二3</li>
</ul>
</li>
<li class="hd">
导航三
<ul class="bd">
<li>导航三1</li>
<li>导航三2</li>
<li>导航三3</li>
</ul>
</li>
<li class="hd">
导航四
<ul class="bd">
<li>导航四1</li>
<li>导航四2</li>
<li>导航四3</li>
</ul>
</li>
<li class="hd">
导航五
<ul class="bd">
<li>导航五1</li>
<li>导航五2</li>
<li>导航五3</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
	$('.nav').slide({
		type:'menu',
		autoPage:false,
		titCell:'.hd',
		targetCell:'.bd',
		effect:'slideDown',
		delayTime:300,
		trigger:'mouseover',
		triggerTime:150,
		returnDefault:true,
		defaultPlay:true
	})
</script>
</html>
